<template>
    <div class="col" :class="colClass" :style="colStyle">
        <slot></slot>
    </div>
</template>


<script>
    var validator = (value)=> {
        let keys = Object.keys(value)
        let valid = true
        keys.forEach(key =>{
            if(!['span','offset'].includes(key)){
                valid = false
            }
        })
        return valid
    }

    export default {
        name: 'GuluCol',
        props:{
            span: {
                type: [Number,String]
            },
            offset: {
                type: [Number,String]
            },
            ipad:{type: Object, validator,},
            narrowPc:{type: Object, validator,},
            pc:{type: Object, validator,},
            widePc:{type: Object, validator,},
        },
        data(){
            return {
                gutter: 0,
            }
        },
        methods:{
            createClasses (obj,str = '') {
                if(!obj) {return []}
                let array = []
                if(obj.span){ array.push(`col-${str}${obj.span}`)}
                if(obj.offset){ array.push(`offset-${str}${obj.offset}`)}
                return array
            }
        },
        computed:{
            colClass(){
                let {span, offset, ipad, narrowPc, pc, widePc} = this
                let createClasses = this.createClasses
                return [
                    ...createClasses({span,offset}),
                    ...createClasses(ipad, 'ipad-'),
                    ...createClasses(narrowPc,'narrow-pc-'),
                    ...createClasses(pc,'pc-'),
                    ...createClasses(widePc,'wide-pc-'),
                ]
            },
            colStyle(){
                return {
                    paddingLeft:  this.gutter/2 + 'px',
                    paddingRight: this.gutter/2 + 'px',
                }
            }
        }
    }
</script>


<style lang="scss" scoped>
    .col{
        $class-prefix: col-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n} {
                width: ($n/24)*100%;
            }
        }

        $class-prefix: offset-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n} {
                margin-left: ($n/24)*100%;
            }
        }

        @media (min-width:577px) {
            $class-prefix: col-ipad-;
            @for $n from 1 through 24 {
                &.#{$class-prefix}#{$n} {
                    width: ($n/24)*100%;
                }
            }

            $class-prefix: offset-ipad-;
            @for $n from 1 through 24 {
                &.#{$class-prefix}#{$n} {
                    margin-left: ($n/24)*100%;
                }
            }
        }

        @media (min-width:769px){
            $class-prefix: col-narrow-pc-;
            @for $n from 1 through 24 {
                &.#{$class-prefix}#{$n} {
                    width: ($n/24)*100%;
                }
            }

            $class-prefix: offset-narrow-pc-;
            @for $n from 1 through 24 {
                &.#{$class-prefix}#{$n} {
                    margin-left: ($n/24)*100%;
                }
            }
        }

        @media (min-width:993px){
            $class-prefix: col-pc-;
            @for $n from 1 through 24 {
                &.#{$class-prefix}#{$n} {
                    width: ($n/24)*100%;
                }
            }

            $class-prefix: offset-pc-;
            @for $n from 1 through 24 {
                &.#{$class-prefix}#{$n} {
                    margin-left: ($n/24)*100%;
                }
            }
        }


        @media (min-width:1201px){
            $class-prefix: col-wide-pc-;
            @for $n from 1 through 24 {
                &.#{$class-prefix}#{$n} {
                    width: ($n/24)*100%;
                }
            }

            $class-prefix: offset-wide-pc-;
            @for $n from 1 through 24 {
                &.#{$class-prefix}#{$n} {
                    margin-left: ($n/24)*100%;
                }
            }
        }
    }
</style>